<template>
  <div class="dashboard investment">
    <NavBar/>
    <div class="container">
      <div class="head item">
        <div class="photo photo-level">
          <img :src="viewData.certification.avatar">
          <span :class="[`level`,`level_${viewData.certification.authType}`]"></span>
        </div>
        <h1 class="ftz24">{{viewData.certification.nickname}}</h1>
        <p>
          <button @click="focus()" :class="{'black':viewData.focusStatus === '0'}">{{viewData.focusStatus === '0'?'已关注':'+关注'}}</button>
          <button @click="showQuestionBox()">提问</button>
        </p>
      </div>
      <div class="item w75 fr con">
        <div class="item-h layui-nav" lay-filter>
          <router-link v-for="item in menusInfo" :key="item.name" class="layui-nav-item ftz16" :to="item.url" :class="{'layui-this':$route.path.indexOf(item.regStr)>=0}">{{item.name}}</router-link>
        </div>
        <transition name="fade" mode="out-in">
          <keep-alive>
            <router-view/>
          </keep-alive>
        </transition>
      </div>
      <div class="w22 fl">
        <div class="item info-h">
          <span>{{viewData.focusNum}}
            <p>关注</p>
          </span>
          <span>{{viewData.fansNum}}
            <p>粉丝</p>
          </span>
          <span>{{viewData.viewpointNum}}
            <p>文章</p>
          </span>
        </div>

        <div class="item info-b">
          <div class="info-b-t" v-if="viewData.authType">
            <dl>
              <span class="appr"><img src="../../assets/res/img/icon_white.png">中亿认证</span>
            </dl>
            <dl v-if="viewData.authType === '1'">{{viewData.certification.company}}</dl>
            <p>擅长：
              <template>
                <span v-for="(item, index) in viewData.certification.domains" :key="index">{{item}}</span>
              </template>
            </p>
          </div>

          <div class="num" v-if="viewData.authType === '1'">
            执业证号：{{viewData.certification.position}}
          </div>
          <div class="labs">
            <span>标签：</span>
            <span>
              <a href="javascript: voie(0)" v-for="(item, index) in viewData.certification.tags" :key="index">{{item}}</a>
            </span>
          </div>
          <div class="intro">
            {{viewData.certification.descs}}
          </div>

        </div>
      </div>
    </div>
    <Footer/>
    <!-- 提问弹窗 -->
    <transition name="fade">
      <QuestionBox v-show="questionBoxFlag" @closeFn="closeQuestionBox" @submitFn="submitQuestion" :masterInfo="targetMasterInfo" />
    </transition>
  </div>
</template>
<script>
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
import QuestionBox from '@/components/questionAnswer/question-box'
import { mapState } from 'vuex'
// import CryptoJS from 'crypto-js'
import * as api from '@/service/api'
// import cookie from '@/utils/cookie'
export default {
  components: {
    NavBar,
    Footer,
    QuestionBox
  },
  data () {
    return {
      questionBoxFlag: false,
      viewData: {
        certification: {}
      },
      total: null,
      menusInfo: [
        {
          name: '直播',
          url: '/dashboard/live/' + this.$route.params.id,
          regStr: '/dashboard/live'
        },
        {
          name: '问答',
          url: '/dashboard/qa/' + this.$route.params.id,
          regStr: '/dashboard/qa'
        },
        {
          name: '观点',
          url: '/dashboard/viewpoint/' + this.$route.params.id,
          regStr: '/dashboard/viewpoint'
        },
        {
          name: '计划',
          url: '/dashboard/plan/' + this.$route.params.id,
          regStr: '/dashboard/plan'
        }
      ],

      searchData: {
        pageSize: 10,
        pageNum: 1,
        status: '0'
      },
      articleList: [],
      loading: false,
      // 提问的大咖
      targetMasterInfo: {
        id: '',
        name: '',
        avatar: '',
        comment: '',
        field: '',
        fieldId: '',
        answerCount: '',
        answerPay: ''
      }
    }
  },
  created () {
    // this.getArticleByStatus()
    this.getCertInfo()
    this.getCertInfoForRaisingQuestion()
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    curId () {
      return this.$route.params.id
    },
    userId () {
      return this.$store.state.me.sysUser.userId
    },
    curRoute () {
      return this.$route.path
    },
    ...mapState({
      me: state => state.me
    })
  },
  methods: {
    changeClassfy (key) {
      this.searchData.status = key
      // this.getArticleByStatus()
    },
    loadMore () {
      this.searchData.pageNum = this.searchData.pageNum + 1
      // this.getArticleByStatus()
    },
    async focus () {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再关注！')
        return false
      }
      await api.modifyUserFocus({
        focusUserId: this.viewData.authType === '1' ? this.viewData.certification.userId : this.viewData.certification.userId,
        focusStatus: this.viewData.focusStatus === '0' ? '1' : '0'
      })
      this.getCertInfo()
    },
    async getCertInfo () {
      let res = await api.getCertInfo({ userId: this.curId })
      this.viewData = res.data
      this.$nextTick(() => {
        document.title = res.data.certification.nickname + '_中亿理投师'
        if (window.layer) {
          window.layer.close(this.layerLoad)
        }
      })
    },
    // 获取投顾的提问所需的基本信息。
    async getCertInfoForRaisingQuestion () {
      let res = await api.getUserInfoForRaisingQuestion({ userId: this.curId })
      if (res && res.data) {
        this.targetMasterInfo = res.data
        this.targetMasterInfo.id = res.data.userId
        this.targetMasterInfo.name = res.data.authName
        this.targetMasterInfo.avatar = res.data.avatar
        this.targetMasterInfo.comment = res.data.avatar
        this.targetMasterInfo.field = res.data.field
        this.targetMasterInfo.fieldId = res.data.fieldId
        this.targetMasterInfo.answerCount = res.data.answerCount
        this.targetMasterInfo.answerPay = res.data.answerPay
      }
    },
    // async getArticleByStatus (page) {
    //   if (page) {
    //     this.searchData.pageNum = page
    //   }
    //   let res = await api.getArticleByStatus({ ...this.searchData, userId: this.curId })
    //   this.articleList = res.data.data.list
    //   this.total = res.data.data.total
    //   this.$nextTick(() => {
    //     if (window.layer) {
    //       window.layer.close(this.layerLoad)
    //     }
    //   })
    // },
    // 显示提问弹窗 数据不全，暂时放着
    showQuestionBox () {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再提问！')
        return false
      }
      if (this.userId === this.curId) {
        window.layui.layer.msg('不能自己向自己提问！')
        return false
      }
      this.questionBoxFlag = true
    },
    // 关闭提问弹窗
    closeQuestionBox () {
      this.questionBoxFlag = false
    },
    // 提交问题 回调结果
    submitQuestion () {
      this.questionBoxFlag = false
      console.log('ok')
    }
  }
}
</script>

<style lang="scss">
@import "../../style/res/investment.scss";
</style>
